{extend name="common/main"/}
{block name="style"}
<!--图片上传-->
<script type="text/javascript" charset="utf-8" src="__STATIC__/common/lib/webuploader/js/webuploader.js"></script>
<link href="__STATIC__/common/lib/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
<!--颜色选择器-->
<link href="__ZUI__/lib/colorpicker/zui.colorpicker.min.css" rel="stylesheet">
<script src="__ZUI__/lib/colorpicker/zui.colorpicker.min.js"></script>
{/block}
{block name="body"}
    <div class="main-title">
        <h2>站点配置</h2>
    </div>

    <div class="tab-content with-padding clearfix">

    <div class="tab-wrap">
        <ul class="nav nav-pills">
            {volist name="type" id="group"}
                <li class="{eq name='id' value='$key'}active{/eq}">
                    <a href="{:url('?id='.$key)}">{$group}</a>
                </li>
            {/volist}
        </ul>

    </div>
    <div class="col-md-12">
        <form action="{:url()}" method="post" class="form-horizontal ajax-form">
            {volist name="list" id="config"}
                <div class="form-item builder_item">
                    <label class="item-label">{$config.title}<span class="check-tips">（{$config.remark}）</span>
                    </label>

                    <div class="controls {$config.type}">
                        {switch name="config.type"}
                            {case value="num"}
                                <input type="number" class="text input-small form-control" name="config[{$config.name}]" value="{$config.value}">
                            {/case}

                            {case value="string"}
                                <input type="text" class="text input-large form-control" name="config[{$config.name}]" value="{$config.value}">
                            {/case}

                            {case value="textarea"}
                                <textarea name="config[{$config.name}]" class="form-control">{$config.value}</textarea>
                            {/case}

                            {case value="entity"}
                                <textarea name="config[{$config.name}]" class="form-control">{$config.value}</textarea>
                            {/case}

                            {case value="select"}
                                <select name="config[{$config.name}]" class="form-control">
                                    {volist name=":parse_config_attr($config['extra'])" id="vo"}
                                    {eq name="config.value" value="$key"}
                                    <option value="{$key}" value="$key" selected>{$vo}</option>
                                    {else}
                                    <option value="{$key}" value="$key">{$vo}</option>
                                    {/eq}
                                    {/volist}
                                </select>
                            {/case}

                            {case value="editor"}<!--增加富文本和非明文-->
                                {:ueditor($config['name'],'config['.$config['name'].']',$config['value'])}
                            {/case}

                            {case value="password"}
                                <input type="password" class="text input-large form-control" name="config[{$config.name}]" autoComplete="off" value="{$config.value}">
                            {/case}

                            {case value="pic"}
                                <div class="controls image-upload">
                                    <div id="upload_single_image_{$config.name}" style="padding-bottom: 5px;">图片上传</div>
                                    <input class="attach" type="hidden" name="config[{$config.name}]" value="{$config['value']}"/>
                                    <div class="upload-img-box">
                                        <div class="upload-pre-item popup-gallery">
                                            {notempty name="config.value"}
                                            <div class="each">
                                                <a href="{$config.value|get_attachment_src}">
                                                    <img src="{$config.value|get_attachment_src}">
                                                </a>
                                                <div class="text-center opacity del_btn" ></div>
                                                <div onclick="admin_image.removeImage($(this),'{$config.value}')"  class="text-center del_btn">删除</div>
                                            </div>
                                            {/notempty}
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    $(function () {
                                        var uploader_{$config.name}= WebUploader.create({
                                            // 选完文件后，是否自动上传。
                                            auto: true,
                                            // sw{:lang("_F_FILE_PATH_")}
                                            swf: 'Uploader.swf',
                                            // 文件接收服务端。
                                            server: "{:url('api/File/upload',array('session_id'=>session_id()))}",
                                            // 选择文件的按钮。可选。
                                            // 内部根据当前运行是创建，可能是input元素，{:lang("_AND_IT_COULD_BE_FLASH_")}.
                                            pick: '#upload_single_image_{$config.name}',
                                            // 只允许{:lang("_SELECT_PICTURES_")}文件。
                                            accept: {
                                                title: 'Images',
                                                extensions: 'gif,jpg,jpeg,png',
                                                mimeTypes: 'image/*'
                                            }
                                        });
                                        uploader_{$config.name}.on('fileQueued', function (file) {
                                            uploader_{$config.name}.upload();
                                        });
                                        uploader_{$config.name}.on('uploadSuccess', function (file, data) {
                                            if (data.code == 200) {
                                                $("[name='config[{$config.name}]']").val(data.data.attachment);
                                                $("[name='config[{$config.name}]']").parent().find('.upload-pre-item').html(
                                                        '<div class="each"><a href="'+ data.data.url+'" title="点击查看大图"><img src="'+ data.data.url+'"></a><div class="text-center opacity del_btn" ></div>' +
                                                        '<div onclick="admin_image.removeImage($(this),\''+ data.data.attachment +'\')"  class="text-center del_btn">删除</div></div>'
                                                );
                                            } else {
                                                handle_ajax(data.msg);
                                                setTimeout(function () {
                                                    $('#top-alert').find('button').click();
                                                    $(that).removeClass('disabled').prop('disabled', false);
                                                }, 1500);
                                            }
                                            
                                        });
                                        uploader_{$config.name}.on('', function(){
                                            //重启webuploader,可多次上传
                                            uploader_{$config.name}.reset();
                                        });
                                    })
                                </script>
                            {/case}

                            {case value="checkbox"}
                                {php}
                                    $config['value_array'] = explode(',', $config['value']);
                                    $config['extra'] = explode("\r\n", $config['extra']);
                                    $config['opt'] = array();
                                    foreach( $config['extra'] as &$val){
                                        $val =  explode(':', $val);
                                        $config['opt'][$val[0]] =  $val[1];
                                    }
                                {/php}
                                {volist name="config.opt" id="option"}
                                    {php}
                                        $checked = in_array($key,$config['value_array']) ? 'checked' : '';
                                        $inputId = "id_$config[name]_$key";
                                    {/php}
                                    <input type="checkbox" value="{$key}" id="{$inputId}" class="oneplus-checkbox" data-field-name="{$config.name}" {$checked}/>
                                    <label for="{$inputId}">{$option|htmlspecialchars}</label>
                                {/volist}
                                <input type="hidden" name="config[{$config.name}]" class="oneplus-checkbox-hidden" data-field-name="{$config.name}" value="{$config.value}"/>

                                <script>
                                    $(function () {
                                        function implode(x, list) {
                                            var result = "";
                                            for (var i = 0; i < list.length; i++) {
                                                if (result == "") {
                                                    result += list[i];
                                                } else {
                                                    result += ',' + list[i];
                                                }
                                            }
                                            return result;
                                        }

                                        $('.oneplus-checkbox').change(function (e) {
                                            var fieldName = $(this).attr('data-field-name');
                                            var checked = $('.oneplus-checkbox[data-field-name=' + fieldName + ']:checked');
                                            var result = [];
                                            for (var i = 0; i < checked.length; i++) {
                                                var checkbox = $(checked.get(i));
                                                result.push(checkbox.attr('value'));
                                            }
                                            result = implode(',', result);
                                            $('.oneplus-checkbox-hidden[data-field-name=' + fieldName + ']').val(result);
                                        });
                                    })
                                </script>
                            {/case}

                            {case value="radio"}
                                {php}
                                    $config['value_array'] = explode(',', $config['value']);
                                    $config['extra'] = explode("\r\n", $config['extra']);
                                    $config['opt'] = array();
                                    foreach( $config['extra'] as &$val){
                                        $val =  explode(':', $val);
                                        $config['opt'][$val[0]] =  $val[1];
                                    }
                                {/php}
                                {volist name="config.opt" id="option"}
                                {php}
                                    $checked = in_array($key,$config['value_array']) ? 'checked' : '';
                                    $inputId = "id_$config[name]_$key";
                                {/php}
                                <input type="radio" name="config[{$config.name}]" value="{$key}" id="{$inputId}" class="oneplus-radio" data-field-name="{$config.name}" {$checked}/>
                                <label for="{$inputId}">{$option|htmlspecialchars}</label>
                                {/volist}
                                <input type="hidden" name="config[{$config.name}]" class="oneplus-radio-hidden" data-field-name="{$config.name}" value="{$config.value}"/>

                                <script>
                                    $(function () {
                                        function implode(x, list) {
                                            var result = "";
                                            for (var i = 0; i < list.length; i++) {
                                                if (result == "") {
                                                    result += list[i];
                                                } else {
                                                    result += ',' + list[i];
                                                }
                                            }
                                            return result;
                                        }

                                        $('.oneplus-radio').change(function (e) {
                                            var fieldName = $(this).attr('data-field-name');
                                            var checked = $('.oneplus-radio[data-field-name=' + fieldName + ']:checked');
                                            var result = [];
                                            for (var i = 0; i < checked.length; i++) {
                                                var checkbox = $(checked.get(i));
                                                result.push(checkbox.attr('value'));
                                            }
                                            result = implode(',', result);
                                            $('.oneplus-radio-hidden[data-field-name=' + fieldName + ']').val(result);
                                        });
                                    })
                                </script>
                            {/case}

                            {case value="color"}
                                <div class="input-group">
                                    <input type="text" class="form-control" id="{$config.name}" name="config[{$config.name}]" data-provide="colorpicker" data-wrapper="input-group-btn" data-pull-menu-right="true" value="{$config.value}" placeholder="请输入16进制颜色值，例如 #FF00DD">
                                </div> 
                                <script>
                                    $(function(){
                                        // 手动初始化时，也可以使用数组来定于预设颜色
                                        $('.input-group #{$config.name}').colorPicker({
                                            colors: ['#fff', '#000', '#3280fC', 'red']
                                        });
                                    })
                                </script>
                            {/case}


                        {/switch}

                    </div>
                </div>
            {/volist}
            <div class="form-item">
                <label class="item-label"></label>

                <div class="controls">
                    <button type="submit" class="btn submit-btn btn-success" target-form="form-horizontal">
                        保存
                    </button>
                    <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">
                        返回
                    </button>
                </div>
            </div>
        </form>
    </div>

</div>
{/block}

